<template>
  <div>
    <h1>【aty-button】 component demo</h1>
    <p>【aty-button】 本质</p>
    <aty-row class="fd-category">
      <aty-title level="4">1. button 类型 </aty-title>
      <aty-row>
        <aty-button type="default" @click="'javascript:void(0)'">Default</aty-button>
        <aty-button type="primary">primary</aty-button>
        <aty-button type="ghost">ghost</aty-button>
        <aty-button type="dashed">dashed</aty-button>
        <aty-button type="text">text</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="info">信息按钮</aty-button>
        <aty-button type="success">成功按钮</aty-button>
        <aty-button type="warning">警告按钮</aty-button>
        <aty-button type="error">错误按钮</aty-button>
        <aty-button type="cancel">取消按钮</aty-button>
      </aty-row>
    </aty-row>
    <aty-row class="fd-category">
      <aty-title level="4">2. button 图标及 button 形状  </aty-title>
      <aty-row>
        <aty-button type="primary" shape="circle" icon="ios-search" />
        <aty-button type="primary" icon="ios-search">搜索</aty-button>
        <aty-button type="primary" shape="circle" icon="ios-search">搜索</aty-button>
        <aty-button type="primary" shape="circle">圆角按钮</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="ghost" shape="circle" icon="ios-search" />
        <aty-button type="ghost" icon="ios-search">搜索</aty-button>
        <aty-button type="ghost" shape="circle" icon="ios-search">搜索</aty-button>
        <aty-button type="ghost" shape="circle">圆角按钮</aty-button>
      </aty-row>
    </aty-row>
    <aty-row class="fd-category">
      <aty-title level="4">3. long button   </aty-title>
      <aty-row>
        <aty-button type="primary" :long="true">primary</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="warning" :long="true">warning</aty-button>
      </aty-row>
    </aty-row>

    <aty-row class="fd-category">
      <aty-title level="4">4. button 不可用状态 </aty-title>
      <aty-row>
        <aty-button type="default">default</aty-button>
        <aty-button type="default" disabled>default(disabled)</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="primary">primary</aty-button>
        <aty-button type="primary" disabled>primary(disabled)</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="ghost">ghost</aty-button>
        <aty-button type="ghost" disabled>ghost(disabled)</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="dashed">default</aty-button>
        <aty-button type="dashed" disabled>default(disabled)</aty-button>
      </aty-row>
      <aty-row>
        <aty-button type="text">text</aty-button>
        <aty-button type="text" disabled>text(disabled)</aty-button>
      </aty-row>
    </aty-row>

    <aty-row>
      <aty-title level="4">5. button 加载状态</aty-title>
      <aty-row>
        <aty-button type="primary" loading>loading...</aty-button>
        <aty-button type="primary" @click="clickMe" :loading="loading"><span v-text="loadingText"></span></aty-button>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
//  import { Alert, Icon } from 'Artery';
export default {
  //  components: { Alert, Icon }
  data () {
    return {
      loading: false,
      loadingText: 'click me!'
    }
  },
  methods: {
    clickMe () {
      this.loading = true
      this.loadingText = 'loading...'
    }

  }
}
</script>
<style  lang="less"  type="text/less"  scoped>
        .fd-category {
            margin:0 20px;
            >.aty-row {
                 margin: 10px 0;
             }
        }

</style>
